#container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    left: 0fp;
    top: 0fp;
}

#titleContainer {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50fp;
    background-color: #e9e9e9;
    flex: 0 0;
}

#backBtn{
    position: absolute;
    left: 10fp;
    top: 10fp;
    width: 30fp;
    height: 30fp;
}

#titleText{
    color: black;
    font-size: 22fp;
}

#chatContainer{
    background-color: #e9e9e9;
}

#messageContainer{
    width: 100%;
    padding-top: 5fp;
    padding-bottom: 5fp;
    min-height: 50fp;
}

#myMessage{
    display: flex;
    width: 100%;
}

#myProfileImgContainer{
    width: 45fp;
    height: 45fp;
    flex: 0 0;
}

#myProfileImg{
    border-radius: 7fp;
}

#myBubble{
    background-color: #38bd38;
    min-width: 10%;
    max-width: 75%;
    border-radius: 7fp;
    padding: 8fp;
    flex: 0 0;
}

#myText{
    font-size: 22fp;
    word-break: break-all;
}

.PicMsg{
    max-height: 200fp;
    max-width: 220fp;
    object-fit: cover;
}

#friendMessage{
    display: flex;
    width: 100%;
}

#friendProfileImgContainer{
    width: 45fp;
    height: 45fp;
    flex: 0 0;
}

#friendProfileImg{
    border-radius: 7fp;
}

#friendBubble{
    background-color: white;
    min-width: 10%;
    max-width: 75%;
    border-radius: 7fp;
    padding: 8fp;
    flex: 0 0;
}

#friendText{
    font-size: 22fp;
    word-break: break-all;

}


#optionContainer{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 60fp;
    align-items: center;
    flex: 0 0;
}

#optionContainer
#moreBtn{
    width: 35fp;
    height: 35fp;
    margin-right: 5fp;
    margin-left: 10fp;
    flex: 0 0;
}


#optionContainer
#textInput{
    height: 40fp;
    background-color: #e9e9e9;
    margin-left: 5fp;
    margin-right: 5fp;
    flex: 1 1;
    radius: 5fp;
    font-size: 22fp;
}

#optionContainer
#sendBtn{
    width: 70fp;
    height: 40fp;
    background-color: #38bd38;
    margin-left: 5fp;
    margin-right: 10fp;
    font-size: 22fp;
    radius: 15fp;
    flex: 0 0;
}

#moreContainer{
    display: flex;
    height: 200fp;
    width: 100%;
    flex-direction: column;
    flex: 0 0;
}

#moreOneLine{
    display: flex;
    height: 100fp;
    width: 100%;
    flex-direction: row;
}

.funcBlock{
    display: flex;
    flex-direction: column;
    width: 50fp;
    height: 100fp;
}

.funcIcon{
    width: 50fp;
    height: 50fp;
}

.funcText{
    width: 50fp;
    height: 40fp;
    font-size: 18fp;
    padding-bottom: 5fp;
    text-align: center;
}
